<!--
 * @Author: wjc
 * @Date: 2025-09-19 10:37:29
 * @LastEditors: wjc
 * @LastEditTime: 2025-11-07 11:56:22
 * @Description: 
-->
<template>
  <div class="login-wrapper">
    <div class="login-box">
      <div class="login-header">
        <h1>
          <span>欢迎</span>
          <span>回来</span>
        </h1>
      </div>
      <el-form
        ref="loginFormRef"
        :model="loginForm"
        :rules="loginRules"
        class="login-form"
        auto-complete="on"
        label-position="top"
      >
        <el-form-item prop="account" :error="validator.err('account')">
          <el-input
            ref="accountRef"
            class="login-input"
            v-model="loginForm.account"
            placeholder="账号"
            name="account"
            type="text"
            tabindex="1"
            auto-complete="on"
            clearable
            @keyup.enter="onLogin"
          />
        </el-form-item>
        <el-form-item prop="password" :error="validator.err('password')">
          <el-input
            ref="passwordRef"
            class="login-input"
            v-model="loginForm.password"
            type="password"
            placeholder="密码"
            name="password"
            tabindex="2"
            auto-complete="on"
            show-password
            @keyup.enter="onLogin"
          />
        </el-form-item>
        <NiceButton class="login-button" :loading="loading" @click="onLogin">登录</NiceButton>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
  import type { FormInstance } from 'element-plus'

  import { useUserStore } from '#/stores/modules'
  import Validation from '#/utils/validation'
  import { NiceButton } from '@nice/nice-ui'

  const userStore = useUserStore()
  const validator = new Validation()
  const loginFormRef = ref<FormInstance>()
  const accountRef = ref()
  const passwordRef = ref()
  const loading = ref(false)
  const loginForm = ref({
    account: '',
    password: '',
    endpoint: 5,
  })
  const loginRules = ref({
    account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  })

  const onLogin = async () => {
    const valid = await loginFormRef.value?.validate()
    if (valid) {
      loading.value = true
      // 表单验证通过，调用登录接口
      await userStore
        .login(loginForm.value)
        .catch((error) => {
          if (error.status === 422) {
            validator.setMessages(error.errors)
          }
        })
        .finally(() => {
          loading.value = false
        })
    }
  }

  onMounted(() => {
    if (loginForm.value.account === '') {
      accountRef.value.focus()
    } else if (loginForm.value.password === '') {
      passwordRef.value.focus()
    }
  })
</script>

<style lang="scss" scoped>
  :root.light {
    .el-input {
      --el-input-bg-color: hsl(231deg 78% 98% / 100%);
    }
  }

  .login-wrapper {
    @apply flex h-full flex-col items-center justify-center;

    .login-box {
      @apply min-w-560px;
    }
  }

  .login-header {
    @apply mb-12 flex flex-col items-start;

    h1 {
      @apply text-11 text-foreground font-bold;

      span {
        @apply relative;

        &:first-child::after {
          @apply absolute -bottom-2 left-0 inline-block h-1 w-full content-[''];

          background: linear-gradient(90deg, #1882f4, #38baf8);
        }
      }
    }
  }

  .login-form {
    :deep(.el-form-item) {
      @apply mb-8;
    }

    .login-input {
      :deep(.el-input__wrapper) {
        @apply h-14;
      }
    }
  }

  .login-options {
    @apply mb-30px flex items-center justify-between;

    :deep(.el-checkbox) {
      .el-checkbox__label {
        @apply text-gray-400;
      }

      &.is-checked .el-checkbox__inner {
        @apply border-primary bg-primary;
      }
    }

    .forgot-password {
      @apply text-3.5 text-primary;
    }
  }

  .login-button {
    @apply h-56px w-full bg-[linear-gradient(90deg,#1882F4,#38BAF8)] hover:bg-[#40a9ff];
  }
</style>
